<div class="layui-fluid" id="VIEW-index" lay-title="首页">
	<div class="layui-row layui-col-space15">
		<div>
			<div class="layui-row layui-col-space15">
				<!--				-->
				<div class="layui-col-sm4" style="width: 33%">
					<div class="layui-card">
						<div class="layui-card-header">上月消费统计</div>
						<div class="layui-card-body layui-text">
							<div class="flex box">
								<div class="flex item">
									<img class="icon" src="hxradmin/images/xiaofei.png">
									<div>
										<span class="nepadmin-linecard-text">{{detail.xiaofei.last_month_total}}</span>
										<span class="nepadmin-ignore">元</span>
										<p class="nepadmin-linecard-title">平台总消费</p>
									</div>
								</div>
								<div class="item xitem">
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.xiaofei.last_month_school_p}}</span>
											<span class="nepadmin-ignore">元</span>
											<p class="nepadmin-linecard-title">校园普通消费</p>
										</div>
									</div>
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.xiaofei.last_month_hote}}</span>
											<span class="nepadmin-ignore">元</span>
											<p class="nepadmin-linecard-title">酒店包时消费</p>
										</div>

									</div>
								</div>
								<div class="item xitem">
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.xiaofei.last_month_school_b}}</span>
											<span class="nepadmin-ignore">元</span>
											<p class="nepadmin-linecard-title">校园包机消费</p>
										</div>
									</div>
<!--									<div class="flex xxitem">-->
<!--										<div >-->
<!--											<span class="nepadmin-linecard-text">{{detail.xiaofei.last_month_school_f}}</span>-->
<!--											<span class="nepadmin-ignore">元</span>-->
<!--											<p class="nepadmin-linecard-title">校园包机退款</p>-->
<!--										</div>-->
<!--									</div>-->
								</div>
							</div>
						</div>

					</div>
				</div>
				<div class="layui-col-sm4" style="width: 33%">
					<div class="layui-card">
						<div class="layui-card-header">上周消费统计</div>
						<div class="layui-card-body layui-text">
							<div class="flex box">
								<div class="flex item">
									<img class="icon" src="hxradmin/images/xiaofei.png">
									<div>
										<span class="nepadmin-linecard-text">{{detail.xiaofei.last_week_total}}</span>
										<span class="nepadmin-ignore">元</span>
										<p class="nepadmin-linecard-title">平台总消费</p>
									</div>
								</div>
								<div class="item xitem">
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.xiaofei.last_week_school_p}}</span>
											<span class="nepadmin-ignore">元</span>
											<p class="nepadmin-linecard-title">校园普通消费</p>
										</div>
									</div>
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.xiaofei.last_week_hote}}</span>
											<span class="nepadmin-ignore">元</span>
											<p class="nepadmin-linecard-title">酒店包时消费</p>
										</div>

									</div>
								</div>
								<div class="item xitem">
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.xiaofei.last_week_school_b}}</span>
											<span class="nepadmin-ignore">元</span>
											<p class="nepadmin-linecard-title">校园包机消费</p>
										</div>
									</div>
<!--									<div class="flex xxitem">-->
<!--										<div >-->
<!--											<span class="nepadmin-linecard-text">{{detail.xiaofei.last_week_school_f}}</span>-->
<!--											<span class="nepadmin-ignore">元</span>-->
<!--											<p class="nepadmin-linecard-title">校园包机退款</p>-->
<!--										</div>-->
<!--									</div>-->
								</div>
							</div>
						</div>

					</div>
				</div>
				<div class="layui-col-sm4" style="width: 33%">
					<div class="layui-card">
						<div class="layui-card-header">本周周消费统计</div>
						<div class="layui-card-body layui-text">
							<div class="flex box">
								<div class="flex item">
									<img class="icon" src="hxradmin/images/xiaofei.png">
									<div>
										<span class="nepadmin-linecard-text">{{detail.xiaofei.week_total}}</span>
										<span class="nepadmin-ignore">元</span>
										<p class="nepadmin-linecard-title">平台总消费</p>
									</div>
								</div>
								<div class="item xitem">
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.xiaofei.week_school_p}}</span>
											<span class="nepadmin-ignore">元</span>
											<p class="nepadmin-linecard-title">校园普通消费</p>
										</div>
									</div>
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.xiaofei.week_hote}}</span>
											<span class="nepadmin-ignore">元</span>
											<p class="nepadmin-linecard-title">酒店包时消费</p>
										</div>

									</div>
								</div>
								<div class="item xitem">
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.xiaofei.week_school_b}}</span>
											<span class="nepadmin-ignore">元</span>
											<p class="nepadmin-linecard-title">校园包机消费</p>
										</div>
									</div>
<!--									<div class="flex xxitem">-->
<!--										<div >-->
<!--											<span class="nepadmin-linecard-text">{{detail.xiaofei.week_school_f}}</span>-->
<!--											<span class="nepadmin-ignore">元</span>-->
<!--											<p class="nepadmin-linecard-title">校园包机退款</p>-->
<!--										</div>-->
<!--									</div>-->
								</div>
							</div>
						</div>

					</div>
				</div>
				<!--				-->
<!--				-->
				<div class="layui-col-sm4" style="width: 33%">
					<div class="layui-card">
						<div class="layui-card-header">上月会员统计</div>
						<div class="layui-card-body layui-text">
							<div class="flex box">
								<div class="flex item">
									<img class="icon" src="hxradmin/images/xiaofei.png">
									<div>
										<span class="nepadmin-linecard-text">{{detail.member_add.last_month_total.register_num}}</span>
										<span class="nepadmin-ignore">个</span>
										<p class="nepadmin-linecard-title">新增会员数</p>
									</div>
								</div>
								<div class="item xitem">
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.member_add.last_month_total.member_use_num_no}}</span>
											<span class="nepadmin-ignore">个</span>
											<p class="nepadmin-linecard-title">新增会员免费上网</p>
										</div>
									</div>
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.member_add.last_month_total.member_use_count_hua}}</span>
											<span class="nepadmin-ignore">个</span>
											<p class="nepadmin-linecard-title">新增会员消费人数</p>
										</div>

									</div>
								</div>
								<div class="item xitem">
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.member_add.last_month_total.member_use_money}}</span>
											<span class="nepadmin-ignore">元</span>
											<p class="nepadmin-linecard-title">消费金额</p>
										</div>
									</div>
									<!--									<div class="flex xxitem">-->
									<!--										<div >-->
									<!--											<span class="nepadmin-linecard-text">{{detail.xiaofei.last_month_school_f}}</span>-->
									<!--											<span class="nepadmin-ignore">元</span>-->
									<!--											<p class="nepadmin-linecard-title">校园包机退款</p>-->
									<!--										</div>-->
									<!--									</div>-->
								</div>
							</div>
						</div>

					</div>
				</div>
				<div class="layui-col-sm4" style="width: 33%">

					<div class="layui-card">
						<div class="layui-card-header">上周会员统计</div>
						<div class="layui-card-body layui-text">
							<div class="flex box">
								<div class="flex item">
									<img class="icon" src="hxradmin/images/xiaofei.png">
									<div>
										<span class="nepadmin-linecard-text">{{detail.member_add.last_week_total.register_num}}</span>
										<span class="nepadmin-ignore">个</span>
										<p class="nepadmin-linecard-title">新增会员数</p>
									</div>
								</div>
								<div class="item xitem">
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.member_add.last_week_total.member_use_num_no}}</span>
											<span class="nepadmin-ignore">个</span>
											<p class="nepadmin-linecard-title">新增会员免费上网</p>
										</div>
									</div>
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.member_add.last_week_total.member_use_count_hua}}</span>
											<span class="nepadmin-ignore">个</span>
											<p class="nepadmin-linecard-title">新增会员消费人数</p>
										</div>

									</div>
								</div>
								<div class="item xitem">
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.member_add.last_week_total.member_use_money}}</span>
											<span class="nepadmin-ignore">元</span>
											<p class="nepadmin-linecard-title">消费金额</p>
										</div>
									</div>
									<!--									<div class="flex xxitem">-->
									<!--										<div >-->
									<!--											<span class="nepadmin-linecard-text">{{detail.xiaofei.last_month_school_f}}</span>-->
									<!--											<span class="nepadmin-ignore">元</span>-->
									<!--											<p class="nepadmin-linecard-title">校园包机退款</p>-->
									<!--										</div>-->
									<!--									</div>-->
								</div>
							</div>
						</div>

					</div>
				</div>
				<div class="layui-col-sm4" style="width: 33%">
					<div class="layui-card">
						<div class="layui-card-header">本周会员统计</div>
						<div class="layui-card-body layui-text">
							<div class="flex box">
								<div class="flex item">
									<img class="icon" src="hxradmin/images/xiaofei.png">
									<div>
										<span class="nepadmin-linecard-text">{{detail.member_add.this_week_total.register_num}}</span>
										<span class="nepadmin-ignore">个</span>
										<p class="nepadmin-linecard-title">新增会员数</p>
									</div>
								</div>
								<div class="item xitem">
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.member_add.this_week_total.member_use_num_no}}</span>
											<span class="nepadmin-ignore">个</span>
											<p class="nepadmin-linecard-title">新增会员免费上网</p>
										</div>
									</div>
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.member_add.this_week_total.member_use_count_hua}}</span>
											<span class="nepadmin-ignore">个</span>
											<p class="nepadmin-linecard-title">新增会员消费人数</p>
										</div>

									</div>
								</div>
								<div class="item xitem">
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.member_add.this_week_total.member_use_money}}</span>
											<span class="nepadmin-ignore">元</span>
											<p class="nepadmin-linecard-title">消费金额</p>
										</div>
									</div>
									<!--									<div class="flex xxitem">-->
									<!--										<div >-->
									<!--											<span class="nepadmin-linecard-text">{{detail.xiaofei.last_month_school_f}}</span>-->
									<!--											<span class="nepadmin-ignore">元</span>-->
									<!--											<p class="nepadmin-linecard-title">校园包机退款</p>-->
									<!--										</div>-->
									<!--									</div>-->
								</div>
							</div>
						</div>

					</div>
				</div>
<!--				-->
				<div class="layui-col-sm4" style="width: 37%">
					<div class="layui-card">
						<div class="layui-card-header">利润统计</div>
						<div class="layui-card-body layui-text">
							<div class="flex box">
								<div class="flex item">
									<img class="icon" src="hxradmin/images/xiaofei.png">
									<div>
										<span class="nepadmin-linecard-text">{{detail.consume_total}}</span>
										<span class="nepadmin-ignore">元</span>
										<p class="nepadmin-linecard-title">平台总消费</p>
									</div>
								</div>
								<div class="item xitem">
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.member_change_money_total}}</span>
											<span class="nepadmin-ignore">元</span>
											<p class="nepadmin-linecard-title">会员总分红</p>
										</div>
									</div>
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.agent_commission_total}}</span>
											<span class="nepadmin-ignore">元</span>
											<p class="nepadmin-linecard-title">代理总分成</p>
										</div>
									</div>
								</div>
								<div class="item xitem">
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.admin_recharge_total}}</span>
											<span class="nepadmin-ignore">元</span>
											<p class="nepadmin-linecard-title">平台总分成</p>
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
				</div>
				<div class="layui-col-sm4" style="width: 29%">
					<div class="layui-card">
						<div class="layui-card-header">会员统计</div>
						<div class="layui-card-body layui-text">
							<div class="flex box">
								<div class="flex item">
									<img class="icon" src="hxradmin/images/money.png" style="padding-right: 20px;">
									<div id="">
										<span class="nepadmin-linecard-text">{{detail.member_recharge_total}}</span>
										<span class="nepadmin-ignore">元</span>
										<p class="nepadmin-linecard-title">会员总充值</p>
									</div>
								</div>
								<div class="item xitem">
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.member_consume_total}}</span>
											<span class="nepadmin-ignore">元</span>
											<p class="nepadmin-linecard-title">总消费</p>
										</div>
									</div>
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.admin_amount_total}}</span>
											<span class="nepadmin-ignore">元</span>
											<p class="nepadmin-linecard-title">总余额</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-sm4">
					<div class="layui-card">
						<div class="layui-card-header">设备统计</div>
						<div class="layui-card-body layui-text">
							<div class="flex box">
								<div class="flex item">
									<img class="icon" src="hxradmin/images/computer.png" style="padding-right: 15px;">
									<div id="">
										<span class="nepadmin-linecard-text">{{detail.device_total}}</span>
										<span class="nepadmin-ignore">台</span>
										<p class="nepadmin-linecard-title">总设备</p>
									</div>
								</div>
								<div class="item xitem">
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.device_online_total}}</span>
											<span class="nepadmin-ignore">台</span>
											<p class="nepadmin-linecard-title">在线</p>
										</div>
									</div>
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.device_offline_total}}</span>
											<span class="nepadmin-ignore">台</span>
											<p class="nepadmin-linecard-title">离线</p>
										</div>
									</div>
								</div>
								<div class="item xitem">
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.device_using_total}}</span>
											<span class="nepadmin-ignore">台</span>
											<p class="nepadmin-linecard-title">使用中</p>
										</div>
									</div>
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.device_unusing_total}}</span>
											<span class="nepadmin-ignore">台</span>
											<p class="nepadmin-linecard-title">未使用</p>
										</div>
									</div>
								</div>

								<div class="item xitem">
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.device_transfer_total}}</span>
											<span class="nepadmin-ignore">台</span>
											<p class="nepadmin-linecard-title">已分配</p>
										</div>
									</div>
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.device_untransfer_total}}</span>
											<span class="nepadmin-ignore">台</span>
											<p class="nepadmin-linecard-title">未分配</p>
										</div>
									</div>
								</div>
								<div class="item xitem">
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.device_rent_total}}</span>
											<span class="nepadmin-ignore">台</span>
											<p class="nepadmin-linecard-title">已租出</p>
										</div>
									</div>
									<div class="flex xxitem">
										<!--										<span class="dian">●</span>-->
										<div>
											<span class="nepadmin-linecard-text">{{detail.device_unrent_total}}</span>
											<span class="nepadmin-ignore">台</span>
											<p class="nepadmin-linecard-title">未出租</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-sm2">
					<div class="nepadmin-linecard">
						<p class="nepadmin-linecard-title">当日充值总金额</p>
						<span class="nepadmin-linecard-text">{{detail.day_recharge_total}}</span>
						<span class="nepadmin-ignore">元</span>
					</div>
				</div>
				<div class="layui-col-sm2">
					<div class="nepadmin-linecard nepadmin-br-green">
						<p class="nepadmin-linecard-title">当月充值总金额</p>
						<span class="nepadmin-linecard-text">{{detail.month_recharge_total}}</span>
						<span class="nepadmin-ignore">元</span>
					</div>
				</div>
				<div class="layui-col-sm2">
					<div class="nepadmin-linecard nepadmin-br-red">
						<p class="nepadmin-linecard-title">当日消费总收益</p>
						<span class="nepadmin-linecard-text">{{detail.day_consume_total}}</span>
						<span class="nepadmin-ignore">元</span>
					</div>
				</div>
				<div class="layui-col-sm2">
					<div class="nepadmin-linecard">
						<p class="nepadmin-linecard-title">当月消费总收益</p>
						<span class="nepadmin-linecard-text">{{detail.month_consume_total}}</span>
					</div>
				</div>
				<div class="layui-col-sm2">
					<div class="nepadmin-linecard">
						<p class="nepadmin-linecard-title">同比总收益（日）</p>
						<span class="nepadmin-linecard-text">{{detail.day_gain_same_ontrast}}</span>
					</div>
				</div>
				<div class="layui-col-sm2">
					<div class="nepadmin-linecard nepadmin-br-green">
						<p class="nepadmin-linecard-title">环比总收益（日）</p>
						<span class="nepadmin-linecard-text">{{detail.day_gain_ring_ontrast}}</span>
					</div>
				</div>
				<div class="layui-col-sm2">
					<div class="nepadmin-linecard nepadmin-br-red">
						<p class="nepadmin-linecard-title">同比总收益（月）</p>
						<span class="nepadmin-linecard-text">{{detail.month_gain_same_ontrast}}</span>
					</div>
				</div>
				<div class="layui-col-sm2">
					<div class="nepadmin-linecard">
						<p class="nepadmin-linecard-title">环比总收益（月）</p>
						<span class="nepadmin-linecard-text">{{detail.month_gain_ring_ontrast}}</span>
					</div>
				</div>
				<div class="layui-col-sm2">
					<div class="nepadmin-linecard">
						<p class="nepadmin-linecard-title">当日收到违约金</p>
						<span class="nepadmin-linecard-text">{{detail.day_deposit_receive_total}}</span>
					</div>
				</div>
				<div class="layui-col-sm2">
					<div class="nepadmin-linecard">
						<p class="nepadmin-linecard-title">当月收到违约金</p>
						<span class="nepadmin-linecard-text">{{detail.month_deposit_receive_total}}</span>
					</div>
				</div>
				<div class="layui-col-sm2">
					<div class="nepadmin-linecard">
						<p class="nepadmin-linecard-title">当日退还违约金</p>
						<span class="nepadmin-linecard-text">{{detail.day_deposit_return_total}}</span>
					</div>
				</div>
				<div class="layui-col-sm2">
					<div class="nepadmin-linecard">
						<p class="nepadmin-linecard-title">当月退还违约金</p>
						<span class="nepadmin-linecard-text">{{detail.month_deposit_return_total}}</span>
					</div>
				</div>

				<!-- <div class="layui-col-sm6">
		  <div class="layui-card">
			  <div class="layui-tab layui-tab-brief layadmin-latestData" lay-filter='index-chart'>
				<ul class="layui-tab-title">
				  <li class="layui-this">日同比总收益</li>
				  <li>月同比总收益</li>
				</ul>
				<div class="layui-tab-content">
				  <div class="layui-tab-item layui-show">
					<div id="index-echartLine"></div>
				  </div>
				</div>
			  </div>
		  </div>
		</div> -->
				<div class="layui-col-sm6">
					<div class="layui-card">
						<div class="layui-tab layui-tab-brief layadmin-latestData" lay-filter='index-chart'>
							<ul class="layui-tab-title">
								<li class="layui-this">会员区域人数统计</li>
								<!-- <li>会员市统计</li> -->
								<div class="layui-inline">
									<label class="layui-form-label">当前区域</label>
									<div class="layui-input-inline">
										<div class="layui-unselect layui-form-select">
											<div class="layui-select-title"><input name="area" type="text" value="全部" readonly class="layui-input layui-unselect"><i
													class="layui-edge"></i></div>
											<dl class="layui-anim layui-anim-upbit" style="">
												<dd :data='0' class="layui-this" @click="choose(0)">全部</dd>
												<dd :data='x.city_id' v-for="x in detail.member_province_distributed" @click="choose(x)">{{x.city_name}}</dd>
											</dl>
										</div>
									</div>
								</div>
							</ul>
							<div class="layui-tab-content">
								<div class="layui-tab-item layui-show">
									<div id="index-echartLine"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-sm6">
					<div class="layui-card">
						<div class="layui-card-header">会员性别统计</div>
						<div class="layui-card-body layui-text">
							<div id="sex-statistics">

							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-sm7" style="width: 100%">
					<div class="layui-card">
						<div class="layui-card-header">新增会员</div>
						<div class="layui-card-body layui-text">
							<div id="new_member">

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<style type="text/css">
	#VIEW-index .box {
		justify-content: space-around;
	}

	#VIEW-index .box .item {
		padding: 12px 0 0;
	}

	#index-echartLine,
	#index-echart,
	#sex-statistics {
		height: 400px;
	}
	#new_member {
		height: 400px;
	}
	#VIEW-index .icon {
		width: 90px;
		padding-right: 20px;
		margin-top: -15px;
	}

	#VIEW-index .xitem .nepadmin-linecard-text {
		font-size: 20px;
	}

	#VIEW-index .xitem .nepadmin-linecard-title {
		font-size: 14px;
	}

	#VIEW-index .xxitem .dian {
		padding-right: 15px;
	}

	#VIEW-index .xxitem .nepadmin-linecard-title {
		padding: 0;
	}

	#VIEW-index .xxitem {
		padding: 0 0 15px;
	}

	#VIEW-index .layui-card .layui-card-header {
		font-weight: bold;
	}

	.layui-tab-title dd.layui-this::after {
		display: none !important;
	}

	.layui-tab-title dd.layui-this {
		color: #fff !important;
	}

	.layui-tab-title .layui-inline {
		font-size: 14px;
		float: right;
		padding: 2px;
	}

	.layui-tab-title .layui-form-select .layui-input {
		width: 150px;
	}
</style>
<script>
	var vm = new Vue({
		el: '#VIEW-index',
		data: {
			detail: {}
		},
		mounted: function() {
			var _this = this;
			layui.admin.ajax('index/index', {}, 1).then(function(res) {
				_this.detail = res.data;
				_this.detail.consume_total=_this.detail.consume_total.toFixed(2);
				_this.detail.admin_recharge_total=_this.detail.admin_recharge_total.toFixed(2);
				_this.detail.admin_amount_total=_this.detail.admin_amount_total.toFixed(2);
				_this.detail.member_consume_total=_this.detail.member_consume_total.toFixed(2);
				_this.detail.day_consume_total=_this.detail.day_consume_total.toFixed(2);
				_this.detail.month_consume_total=_this.detail.month_consume_total.toFixed(2);
				_this.choose(0,1,res.data.member_echart);
				// _this.new_member_echart( );
			});
		},
		methods: {
			createChart: function(data) {
				var option = {
					color: ['#3398DB'],
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: data.name,
						axisTick: {
							alignWithLabel: true
						},
						axisLabel: {
							rotate:38
						}
					}],
					yAxis: [{
						type: 'value',
						name: '会员人数'/* ,
						axisLabel: {
							formatter: '￥{value}'
						} */
					}],
					series: [{
						name: '会员人数',
						type: 'bar',
						barWidth: '60%',
						label: {
							show: true,
							position: 'top'
						},
						data: data.num
					}]
				}
				var chartDom = document.getElementById('index-echartLine');
				if (!chartDom){
					this.createChart(data);
				}
				var myChart = echarts.init(chartDom,'blue');
				myChart.setOption(option);
			},
			choose:function(x,type,member_echart){
				x.city_id?x.city_id:x={city_id:x};
				var data={name:[],num:[]}
				if(x.city_id){
					for(var i=0; i<this.detail.member_city_distributed.length;i++){
						if(x.city_id==this.detail.member_city_distributed[i].pid){
							data.name.push(this.detail.member_city_distributed[i].city_name);
							data.num.push(this.detail.member_city_distributed[i].num);
						}
					}
				}else{
					for(var i=0; i<this.detail.member_province_distributed.length;i++){
						if(x.city_id==this.detail.member_province_distributed[i].pid){
							data.name.push(this.detail.member_province_distributed[i].city_name);
							data.num.push(this.detail.member_province_distributed[i].num);
						}
					}
				}
				this.echart(data,type,member_echart);
			},
			new_member_echart:function (data=''){
				var chartDom = document.getElementById('new_member');
				var myChart = echarts.init(chartDom);
				if (!chartDom){
					this.new_member_echart(data);
				}

				var option1;
				 option1 = {
					title: {
						text: '折线图堆叠'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['注册会员数', '酒店免费使用人数', '酒店消费人数', '校园使用人数']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: data.months
					},
					yAxis: {
						type: 'value'
					},
					series: [
						{
							name: '注册会员数',
							type: 'line',
							stack: '总量',
							data: data.member_add
						},
						{
							name: '酒店免费使用人数',
							type: 'line',
							stack: '总量',
							data: data.member_hotel_mianfei
						},
						{
							name: '酒店消费人数',
							type: 'line',
							stack: '总量',
							data:data.member_hotel_xiaofei
						},
						{
							name: '校园使用人数',
							type: 'line',
							stack: '总量',
							data:data.xiaoyuan
						}
					]
				};
				option1 && myChart.setOption(option1);
			},
			echart:function(data,type,member_echart=''){
				var _this=this;
				layui.use(
						['admin', 'echarts', 'element','util'],
						function(admin, echarts, element, helper, table, util) {
							var $ = layui.jquery
							var view = $('#VIEW-chart-index')
							element.render('progress')

							_this.createChart(data);
							element.on('tab(index-chart)', function(data) {
								createChart(data.index)
							})
							if(type==1){
								var ldata=[],ydata=[];
								for(var i=0; i<_this.detail.member_gender_distributed.length; i++){
									ldata.push(_this.detail.member_gender_distributed[i].name);
									ydata.push({
										value:_this.detail.member_gender_distributed[i].num,
										name:_this.detail.member_gender_distributed[i].name
									})
								}
								echarts
										.init(document.getElementById('sex-statistics'))
										.setOption({
											tooltip: {
												trigger: 'item',
												formatter: '{a} <br/>{b} : {c} ({d}%)'
											},
											legend: {
												orient: 'vertical',
												left: 'left',
												data: ldata
											},
											series: [{
												name: '会员性别',
												type: 'pie',
												radius: '55%',
												center: ['50%', '60%'],
												label: {
													normal: {
														formatter: '{b}:{c}人: ({d}%)',
														textStyle: {
															fontWeight: 'normal',
															fontSize: 15
														}
													}
												},
												data: ydata,
												emphasis: {
													itemStyle: {
														shadowBlur: 10,
														shadowOffsetX: 0,
														shadowColor: 'rgba(0, 0, 0, 0.5)'
													}
												}
											}]
										})
							}
							_this.new_member_echart(member_echart);
						}
				)
			}
		}
	})
</script>
